import React from 'react';
import {NavLink, Outlet, useLocation} from "react-router-dom";

function Home(props) {
    const {pathname} = useLocation()
    return (
        <div>
            <h2>Home组件内容</h2>
            <div>
                <ul className="nav nav-tabs">
                    <li className={pathname.toLowerCase().includes('/home/news')? 'active':''}><NavLink to="news">News</NavLink></li>
                    <li className={pathname.toLowerCase().includes('/home/message')? 'active':''}><NavLink to="message">Message</NavLink></li>
                </ul>
                <div>
                    <Outlet/>
                </div>
            </div>
        </div>
    );
}

export default Home;